<template>
  <div class="mainNav" :class="is ? 'NavSetfff' : ''">
    <el-menu
      :active-text-color="text_color"
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/mdd">目的地</el-menu-item>
      <el-menu-item index="/gonglve">旅游攻略</el-menu-item>
      <el-submenu index="4">
        <template slot="title">去旅行</template>
        <el-menu-item index="/sales">自由行</el-menu-item>
        <el-menu-item index="4-2">跟团游</el-menu-item>
        <el-menu-item index="4-3">当地游</el-menu-item>
      </el-submenu>
      <el-menu-item index="/flight">机票火车票</el-menu-item>
      <el-menu-item index="/hotel">订酒店</el-menu-item>
      <el-menu-item index="img"
        ><img width="50%" :src="imgUrl" alt=""
      /></el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "/",
      text_color: "#ff9d00",
      imgUrl: "https://css.mafengwo.net/images/mfwzx.png",
      is: false,
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push(key);
      key == "/mdd" ? this.setHeaderSty() : (this.is = false);
    },
    setHeaderSty() {
      console.log("xiaoye-设置头部=>>>>>>>>");
      this.is = true;
    },
  },
  // watch: {
  //   '$route':{
  //     deep:true,
  //     handler(val){
  //       console.log("路由改变了=>>",val.path);
  //       val.path == 'mdd'?setHeaderSty():''
  //     }
  //   }
  // }
};
</script>
<style lang="scss" scoped>
.el-menu-item {
  padding: 0 15px;
}
.mainNav {
  z-index: 999;
}
/deep/.el-menu {
  background-color: rgba(255, 0, 0, 0);
}
/deep/.el-menu::after {
  display: none;
}
.NavSetfff {
  /deep/.el-menu--horizontal > .el-menu-item {
    color: #fff;
  }
  /deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
    color: #fff;
  }
}

</style>